<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>强制刷新缓存</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 100px auto;
            padding: 20px;
            text-align: center;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .card {
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
        }
        h1 {
            color: #333;
            margin-bottom: 20px;
        }
        .emoji {
            font-size: 64px;
            margin: 20px 0;
        }
        .btn {
            display: inline-block;
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 10px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
        }
        .btn-danger {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
        }
        .btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 20px rgba(245, 87, 108, 0.4);
        }
        .steps {
            text-align: left;
            margin: 20px 0;
            padding: 20px;
            background: #f5f5f5;
            border-radius: 10px;
        }
        .steps li {
            margin: 10px 0;
            line-height: 1.6;
        }
        .countdown {
            font-size: 48px;
            font-weight: bold;
            color: #667eea;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="card">
        <div class="emoji">🔄</div>
        <h1>强制清除缓存</h1>
        <p>如果批量删除功能还是405错误，请执行以下操作：</p>
        
        <div class="steps">
            <ol>
                <li><strong>第1步</strong>: 按 <code>Ctrl+Shift+Delete</code> (Windows) 或 <code>Cmd+Shift+Delete</code> (Mac)</li>
                <li><strong>第2步</strong>: 选择"时间范围" = "全部时间"</li>
                <li><strong>第3步</strong>: 勾选"缓存"和"Cookie"</li>
                <li><strong>第4步</strong>: 点击"清除数据"</li>
                <li><strong>第5步</strong>: 点击下面的按钮</li>
            </ol>
        </div>

        <button class="btn btn-primary" onclick="forceReload()">
            ✨ 强制刷新并跳转
        </button>

        <button class="btn btn-danger" onclick="clearAndReload()">
            🔥 清除所有缓存并刷新
        </button>

        <div id="countdown" class="countdown" style="display:none;"></div>
    </div>

    <script>
        function forceReload() {
            // 添加时间戳强制刷新
            const timestamp = new Date().getTime()
            window.location.href = `/?t=${timestamp}#/audit-log`
        }

        function clearAndReload() {
            // 清除localStorage
            localStorage.clear()
            
            // 清除sessionStorage
            sessionStorage.clear()
            
            // 显示倒计时
            const countdownDiv = document.getElementById('countdown')
            countdownDiv.style.display = 'block'
            
            let count = 3
            countdownDiv.textContent = count
            
            const interval = setInterval(() => {
                count--
                if (count > 0) {
                    countdownDiv.textContent = count
                } else {
                    clearInterval(interval)
                    
                    // 尝试清除Service Worker
                    if ('serviceWorker' in navigator) {
                        navigator.serviceWorker.getRegistrations().then(function(registrations) {
                            for(let registration of registrations) {
                                registration.unregister()
                            }
                        })
                    }
                    
                    // 强制刷新
                    const timestamp = new Date().getTime()
                    window.location.href = `/?t=${timestamp}&cache=clear#/audit-log`
                }
            }, 1000)
        }

        // 添加键盘快捷键
        document.addEventListener('keydown', function(e) {
            // Ctrl+Shift+R 或 Cmd+Shift+R
            if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'R') {
                e.preventDefault()
                forceReload()
            }
        })
    </script>
</body>
</html>
